<template>
  <div>
    <div class="topSearch">
      <p><span>套件名称：</span>
        <el-input v-model="params.name" clearable size="small" style="width: 200px"
                  placeholder="请输入产品名称"></el-input>
      </p>
      <p><span>套件编码：</span>
        <el-input v-model="params.code" clearable size="small" style="width: 200px"
                  placeholder="请输入产品编码"></el-input>
      </p>
      <p><span>套件类型：</span>
        <el-select v-model="params.directoryType" clearable size="small" style="width: 200px"
                   placeholder="请选择产品品牌">
          <el-option v-for="item in systemList" :label="item.brandName" :value="item.materialBrandId"
                     :key="item.materialBramdId"></el-option>
        </el-select>
      </p>
      <p>
        <el-button size="small" type="info" @click="_reset">重置</el-button>
        <el-button size="small" type="primary" @click="_search">查询</el-button>
        <el-button size="small" type="primary" @click="_add" v-if="authority.includes(1231)">新增套件</el-button>
      </p>
    </div>
    <div class="centerTable">
      <el-table :data="productList" height="calc(100vh - 250px)"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
        <el-table-column prop="name" label="套件名称"></el-table-column>
        <el-table-column prop="code" label="套件编码"></el-table-column>
        <el-table-column prop="directoryType" label="套件类型">
          <template v-slot:default="scope">
            {{ scope.row.directoryType == 1 ? '零食很忙' : "赵一鸣" }}
          </template>
        </el-table-column>
        <el-table-column prop="azCostPrice" label="套件销售价"></el-table-column>
        <el-table-column prop="jhCostPrice" label="套件拣货价"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-link style="font-size: 13px;text-decoration: underline;margin-left: 10px" type="primary"
                     @click="_edit(scope.row)" v-if="authority.includes(1232)">编 辑
            </el-link>
            <el-link style="font-size: 13px;text-decoration: underline;margin-left: 10px" type="danger"
                     @click="_delete(scope.row)" v-if="authority.includes(1233)">删 除
            </el-link>
            <el-link style="font-size: 13px;text-decoration: underline;margin-left: 10px" type="warning"
                     @click="_editCount(scope.row)" v-if="authority.includes(1234)">修改用量
            </el-link>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
          style="padding: 20px 0"
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
      >
      </el-pagination>

    </div>
    <el-dialog :close-on-click-modal="false" :visible.sync="addDialog" center :title="title" width="40%">
      <div class="inherit">
        <p><span>套件名称<i>*</i> ：</span>
          <el-input v-model="data.name" clearable size="small" style="width: 250px"
                    placeholder="请输入套件名称"></el-input>
        </p>
        <p><span>套件编码<i>*</i> ：</span>
          <el-input v-model="data.code" :disabled="title=='编辑套件'" clearable size="small" style="width: 250px"
                    placeholder="请输入套件编码"></el-input>
        </p>
      </div>
      <div class="inherit">
        <p><span>套件类型<i>*</i> ：</span>
          <el-select :disabled="title=='编辑套件'" v-model="data.directoryType" clearable size="small" style="width: 250px"
                     placeholder="请选择套件类型">
            <el-option v-for="item in systemList" :label="item.brandName" :value="item.materialBrandId"
                       :key="item.materialBramdId"></el-option>
          </el-select>
        </p>
        <p><span>套件安装价<i>*</i> ：</span>
          <el-input v-model="data.azCostPrice" clearable size="small" style="width: 250px"
                    placeholder="请输入套件安装价"></el-input>
        </p>
      </div>
      <div class="inherit">
        <p><span>套件拣货价<i>*</i> ：</span>
          <el-input v-model="data.jhCostPrice" clearable size="small" style="width: 250px"
                    placeholder="请输入套件拣货价"></el-input>
        </p>
      </div>
      <span slot="footer">
      <el-button size="small" @click="addDialog=false">取 消</el-button><el-button size="small"
                                                                                 type="primary"
                                                                                 @click="_submit">提 交</el-button> </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :visible.sync="editInfoDialog" title="修改套件内单品用量" width="60%" center>
      <el-link type="primary" style="text-decoration: underline;float: right" @click="addProducts"> 新增单品</el-link>
      <el-table :data="editInfo" :cellStyle="{ textAlign: 'center', 'font-size': '12px' }" :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400, }">
        <el-table-column prop="productName" label="产品名称"></el-table-column>
        <el-table-column prop="dosage" label="数量"></el-table-column>
        <el-table-column>
          <template v-slot:default="scope">
            <el-link @click="deletePro(scope.$index)"><i class="el-icon-delete"></i>
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer"> <el-button size="middle" type="primary" @click="submitProduct">提 交</el-button></span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :visible.sync="productInfo" modal-append-to-body width="30%"
               title="添加产品及用量信息" center>
      <div style="display: flex;flex-direction: column;align-items: center">
        <p><span>选择产品：</span>
          <el-select filterable v-model="pInfo.materialId" remote @change="getInfo" :remote-method="changeInfoM"
                     clearable size="small"
                     style="width: 250px"
                     placeholder="请选择">
            <el-option v-for="item in productInfoList" :label="item.productName" :value="item.materialId"
                       :key="item.materialId"></el-option>
          </el-select>
        </p>
        <p style="margin-top: 30px"><span>填写用量：</span>
          <el-input v-model="pInfo.dosage" clearable size="small" style="width: 250px"
                    placeholder="请输入数量">
          </el-input>
        </p>
      </div>
      <span slot="footer">
      <el-button size="small" type="warning" @click="subInfo">新 增</el-button></span>
    </el-dialog>
  </div>
</template>

<script>
import quinn from "../../utils/quinn";

export default {
  name: "ProductManage",
  components: {},
  data() {
    return {
      addDialog: false,
      editInfoDialog: false,
      productInfo: false,
      currentPage: 1,
      totalCount: 0,
      title: "",
      sateValue: "",
      infoId: "",
      pInfo: {},
      data: {
        name: "",
        code: "",
        directoryType: "",
        azCostPrice: "",
        jhCostPrice: "",
      },
      editId: "",
      systemList: [],
      editInfo: [],
      productList: [],
      authority: [],
      productInfoList: [],
      titleList: [],
      params: {
        pageSize: 20,
        pageNumber: 1,
      },
      isAdditionList: [{name: '否', id: 0}, {name: "是", id: 1}]
    };
  },
  created() {
    this.$api.materialGetMaterialBrandList().then(res => {
      this.systemList = res
    })
    this.getList()
    const {authorityList = []} = quinn.getStorage("userData")
    this.authority = authorityList;
  },
  methods: {
    changeInfoM(val) {
      this.$api.materialGetMaterialList({pageNumber: 1, pageSize: 100, productName: val}).then(res => {
        this.productInfoList = res.data
      })
    },
    submitProduct() {
      const data = {
        directoryId: this.infoId,
        list: this.editInfo
      }
      this.$api.directoryUpdateMaterialDirectory(data).then(res => {
        if (res == 1) {
          this.$message.success('提交成功！')
          this.editInfoDialog = false
          this.getList()
        }
      })
    },
    deletePro(index) {
      this.editInfo.splice(index, 1)
    },
    getInfo(val) {
      const selected = this.productInfoList.find(item => item.materialId === val)
      this.pInfo.productName = selected.productName
    },
    subInfo() {
      this.editInfo.push(this.pInfo)
      this.productInfo = false
    },
    addProducts() {
      this.productInfo = true
      this.pInfo = this.$options.data.call(this).pInfo
      this.productInfoList = []
    },
    _edit(row) {
      this.addDialog = true
      this.title = '编辑套件'
      this.editId = row.materialId
      Object.keys(this.data).forEach((key) => {
        if (row.hasOwnProperty(key)) {
          this.data[key] = row[key]
          this.data.directoryId = row.directoryId
        }
      })
    },
    _reset() {
      this.params = this.$options.data.call(this).params
      this.sateValue = ''
      this.getList()
    },
    _search() {
      this.params.pageNumber = 1
      this.getList()
    },
    _delete(row) {
      // /directory/deleteDirectory
      const data = {
        id: row.directoryId,
      }
      this.$confirm(`确认删除${row.name}?`)
          .then((_) => {
            this.$api.directoryDeleteDirectory(data).then((res) => {
              this.$message.success('删除成功！')
              this.getList()
            })
          })
          .catch((_) => {
            return
          })
    },
    getList() {
      this.$api.directoryDirectoryListNew(this.params).then(res => {
        this.productList = res.data
        this.totalCount = res.total
      })
    },
    _add() {
      this.addDialog = true
      this.title = '新增套件'
      this.data = this.$options.data.call(this).data
    },
    async _submit() {
      const data1 = this.data
      try {
        const apiMap = {
          '新增套件': this.$api.directoryAddDirectoryInfo,
          '编辑套件': this.$api.directoryUpdateDirectoryInfo
        };
        const apiFunc = apiMap[this.title];
        if (!apiFunc) return;
        const resDate = await apiFunc(data1);
        this.$message.success(`${this.title}成功！`);
        this.addDialog = false;
        this.getList()
      } catch (err) {
        console.error('接口请求出错：', err);
        this.$message.error('操作失败，请稍后重试');
      }
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getList()
    },
    _editCount(row) {
      this.infoId = row.directoryId
      this.$api.directoryGetMaterialDirectoryVo({directoryId: row.directoryId}).then(res => {
        this.editInfo = res
        this.editInfoDialog = true
      })
    }
  },
};
</script>

<style scoped lang="less">
/deep/ .el-dialog__header {
  background-color: #0f79e2;
  //border-top-left-radius: 20px;
  //border-top-right-radius: 20px;
}

/deep/ .el-input.is-disabled .el-input__inner {
  color: #777;
}

/deep/ .el-dialog__title {
  color: #fff;
}

.inherit {
  display: flex;
  justify-content: space-between;
  margin-bottom: 35px;

  span {
    display: inline-block;
    width: 100px;
  }

  i {
    color: #ff4949;
  }
}

.topSearch {
  display: flex;
  flex-wrap: wrap;

  p {
    margin-right: 15px;
    margin-bottom: 10px;
  }
}
</style>

